CSS @media: Pattern Avanzati di Media Query per un Web Veramente Responsivo

Nel panorama dinamico dello sviluppo web moderno, creare esperienze che si adattino fluidamente a una gamma sempre crescente di dispositivi e contesti utente non è solo una best practice, ma un imperativo. Dai monitor desktop ad alta risoluzione agli smartphone compatti, dagli utenti nei centri urbani trafficati con internet ad alta velocità a quelli in aree remote con larghezza di banda limitata, e dagli individui che preferiscono temi scuri a quelli che richiedono movimento ridotto, il web deve essere flessibile. È qui che le regole CSS @media, la pietra angolare del design responsivo, trascendono la loro applicazione di base per diventare potenti strumenti di adattabilità avanzata.

Mentre molti sviluppatori hanno familiarità con l'uso di @media per semplici aggiustamenti dei breakpoint, la vera potenza risiede nei suoi pattern avanzati, negli operatori logici e nella capacità di attingere alle preferenze dell'utente e dell'ambiente. Questa guida completa ti porterà oltre le basi, esplorando il mondo intricato delle funzionalità avanzate delle media query che ti consentono di creare applicazioni web veramente resilienti, inclusive e accessibili a livello globale.

Approfondiremo tecniche che permettono ai tuoi design di reagire non solo alle dimensioni dello schermo, ma anche alle capacità del dispositivo, alle impostazioni di accessibilità dell'utente e persino all'ambiente circostante, garantendo un'esperienza superiore per ogni utente, ovunque.

Le Basi: Un Breve Riepilogo della Sintassi @media di Base

Prima di immergerci nei pattern avanzati, ristabiliamo rapidamente le fondamenta. Una media query di base consiste in un tipo di media opzionale (come screen, print, all) e una o più caratteristiche dei media (come min-width, orientation). Gli stili all'interno del blocco @media vengono applicati solo se le condizioni sono soddisfatte.

            /* Esempio base: gli stili si applicano solo su schermi più larghi di 768px */
@media screen and (min-width: 768px) {
  body {
    padding: 20px;
  }
}

/* Gli stili si applicano solo durante la stampa della pagina */
@media print {
  nav {
    display: none;
  }
}

            

              
                Copy
              
            
          

Questa comprensione fondamentale è cruciale, poiché i pattern avanzati si basano direttamente su di essa.

Oltre i Breakpoint: Comprendere le Caratteristiche delle Media Query

Mentre width e height sono le caratteristiche dei media più utilizzate, un ricco set di altre consente decisioni di design molto più sfumate. Comprendere queste capacità è la chiave per superare i layout generici mobile/tablet/desktop.

Caratteristiche Basate sul Viewport (I Soliti Sospetti e Altro)

Queste caratteristiche si riferiscono alle dimensioni e alle proprietà del viewport del browser, non allo schermo fisico del dispositivo.

• width, height, min-width, max-width, min-height, max-height: Questi sono il pane quotidiano del design responsivo. Ti consentono di definire breakpoint basati sull'area visibile del browser. Ad esempio, potresti cambiare un layout a colonna singola in un layout a più colonne quando min-width raggiunge un certo valore in pixel.

            /* Applica un layout a due colonne su schermi più larghi */
@media (min-width: 900px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

• aspect-ratio, min-aspect-ratio, max-aspect-ratio: Queste caratteristiche ti consentono di mirare a design basati sul rapporto tra la larghezza e l'altezza del viewport. Ciò è incredibilmente utile per ottimizzare i contenuti per varie forme di schermo, dai monitor ultra-wide agli smartphone alti.

            /* Ottimizza l'immagine hero per schermi ultra-wide (es. 21/9) */
@media (min-aspect-ratio: 16/9) {
  .hero-banner {
    height: auto;
    max-height: 400px;
    object-fit: cover;
  }
}

            

              
                Copy
              
            
          

• orientation: Questa caratteristica rileva se il viewport è in modalità portrait (l'altezza è maggiore o uguale alla larghezza) o landscape (la larghezza è maggiore dell'altezza). È particolarmente vitale per le esperienze su mobile e tablet.

            /* Adatta il layout per l'orientamento landscape sui tablet */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

            

              
                Copy
              
            
          

Caratteristiche Basate sul Dispositivo (Meno Comuni, Ma Utili)

Queste caratteristiche si riferiscono alle proprietà del dispositivo di output fisico. Mentre le query basate sul viewport sono generalmente preferite per il layout dei contenuti, le caratteristiche basate sul dispositivo hanno nicchie specifiche.

• device-width, device-height (e le loro varianti min/max): Storicamente, venivano utilizzate per mirare a risoluzioni di dispositivi specifici. Tuttavia, con le dimensioni variabili delle finestre del browser su desktop e tablet, e le diverse densità di pixel, fare affidamento su di esse può essere inaffidabile per il layout generale. Le dimensioni del viewport sono quasi sempre più appropriate. Potrebbero ancora essere considerate in scenari molto di nicchia, come applicazioni progettate specificamente per schermi a dimensione fissa come i chioschi, ma questi sono rari nello sviluppo web tipico.
• resolution: Questa caratteristica ti consente di mirare a display basati sulla loro densità di pixel (DPI o DPX – dots per pixel). Ciò è cruciale per fornire immagini di alta qualità a schermi "Retina" o ad alta densità di DPI senza inviare file inutilmente grandi a display standard.

            /* Fornisci un'immagine di sfondo a risoluzione più alta per schermi ad alta densità di DPI */
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

            

              
                Copy
              
            
          

Nota l'uso sia di dpi che di dppx per coprire diverse interpretazioni dei browser e rendere il tuo codice a prova di futuro. dppx (dots per pixel unit) è generalmente preferito poiché è più indipendente dal dispositivo.

Operatori Logici: Combinare Condizioni con Precisione

Per costruire media query veramente sofisticate, è necessario combinare più condizioni utilizzando operatori logici. Questi ti permettono di specificare esattamente quando un insieme di stili dovrebbe essere applicato.

Operatore `and`: Tutte le Condizioni Devono Essere Vere

La parola chiave and combina più caratteristiche dei media o tipi di media e caratteristiche. Tutte le condizioni specificate devono risultare vere affinché gli stili vengano applicati.

            /* Applica stili solo su schermi con larghezza tra 768px e 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    order: 2;
  }
  .main-content {
    width: 70%;
  }
}

            

              
                Copy
              
            
          

Questo è estremamente utile per mirare a intervalli di dispositivi specifici, come tablet in modalità verticale, o per creare layout altamente personalizzati per dimensioni di schermo molto specifiche.

Operatore `or` (`,` separato da virgola): Qualsiasi Condizione Può Essere Vera

Nelle regole @media del CSS, una virgola (`,`) agisce come un OR logico. Se una qualsiasi delle media query separate da virgola risulta vera, gli stili associati vengono applicati.

            /* Gli stili si applicano se lo schermo è più largo di 1200px OPPURE se il dispositivo è in orientamento landscape (indipendentemente dalla larghezza) */
@media screen and (min-width: 1200px), screen and (orientation: landscape) {
  .header-nav {
    display: flex;
    flex-direction: row;
  }
}

/* Gli stili si applicano per i media di stampa OPPURE per schermi con una risoluzione minima */
@media print, (min-resolution: 2dppx) {
  img {
    image-rendering: -webkit-optimize-contrast; /* Per un rendering migliore su stampa/alta risoluzione */
  }
}

            

              
                Copy
              
            
          

Questa potente funzionalità ti permette di raggruppare stili che dovrebbero applicarsi in più condizioni distinte, portando a fogli di stile più concisi e leggibili.

Operatore `not`: Invertire una Condizione

La parola chiave not nega un'intera media query, il che significa che gli stili vengono applicati se la condizione specificata non è soddisfatta.

            /* Applica stili a tutti i tipi di media ECCETTO la stampa */
@media not print {
  .interactive-element {
    cursor: pointer;
  }
}

/* Applica stili se NON è uno schermo con larghezza minima di 768px (cioè, per la stampa o schermi più piccoli di 768px) */
@media not screen and (min-width: 768px) {
  .desktop-only-feature {
    display: none;
  }
}

            

              
                Copy
              
            
          

L'operatore not può essere insidioso e dovrebbe essere usato con giudizio. Assicurati di comprendere l'ambito di ciò che viene negato. Ad esempio, @media not screen and (min-width: 768px) significa "non uno schermo E larghezza minima di 768px", che è logicamente equivalente a "se non è uno schermo OPPURE se è uno schermo E la larghezza massima è inferiore a 768px". Spesso è più chiaro usare max-width invece di not min-width.

Parola Chiave `only`: Garantire la Compatibilità Retroattiva (Contesto Storico)

La parola chiave only è stata introdotta per nascondere i fogli di stile dai browser più vecchi che non supportavano pienamente le media query. Se un browser più vecchio incontrava @media only screen, tipicamente ignorava la regola perché non riconosceva only come un tipo di media valido. I browser moderni lo interpretano correttamente. Dato l'ampio supporto dei browser per le media query oggi, only è in gran parte ridondante per lo sviluppo nuovo ma potrebbe essere visto in codebase legacy.

            /* Esempio: Stili applicati solo sugli schermi, nascosti ai browser molto vecchi */
@media only screen and (min-width: 992px) {
  .some-component {
    padding: 30px;
  }
}

            

              
                Copy
              
            
          

Caratteristiche Media per le Preferenze Utente: Abbracciare Inclusività e Accessibilità

Queste sono forse le caratteristiche avanzate delle media query più entusiasmanti e di impatto, poiché consentono agli sviluppatori di rispondere direttamente alle preferenze a livello di sistema operativo o browser degli utenti, portando a esperienze significativamente più accessibili e user-friendly. Questo è particolarmente importante per un pubblico globale con esigenze e ambienti diversi.

prefers-color-scheme: Modalità Chiara e Scura

Questa caratteristica rileva se l'utente ha richiesto un tema di colore chiaro o scuro per il proprio sistema operativo o user agent. L'implementazione della modalità scura migliora significativamente l'accessibilità e il comfort, in particolare in ambienti con scarsa illuminazione o per utenti con sensibilità alla luce.

• no-preference: Nessuna preferenza è indicata dall'utente.
• light: L'utente preferisce un tema chiaro.
• dark: L'utente preferisce un tema scuro.

            /* Tema predefinito (chiaro) */
body {
  background-color: #ffffff;
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
  a {
    color: #66ccff;
  }
}

            

              
                Copy
              
            
          

Per implementazioni più robuste della modalità scura, le Proprietà Personalizzate CSS (variabili) sono preziose, permettendoti di definire dinamicamente le palette di colori.

prefers-reduced-motion: Rispettare il Comfort dell'Utente

Animazioni e transizioni possono migliorare l'esperienza utente, ma per alcuni individui (ad esempio, quelli con disturbi vestibolari, ADHD, o semplicemente coloro che trovano il movimento una distrazione), possono causare disagio o persino nausea. Questa caratteristica rileva se l'utente ha richiesto animazioni non essenziali minime.

• no-preference: Nessuna preferenza è indicata.
• reduce: L'utente preferisce movimento ridotto.

            /* Animazione predefinita */
.animated-element {
  transition: transform 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
    animation: none;
  }
  .hero-carousel {
    scroll-behavior: auto; /* Disabilita lo scroll fluido */
  }
}

            

              
                Copy
              
            
          

È una forte best practice di accessibilità fornire sempre un'alternativa a movimento ridotto. Questo aiuta a costruire un web che sia utilizzabile e confortevole per tutti, indipendentemente dalle loro sensibilità individuali.

prefers-contrast: Regolare il Contrasto Visivo

Questa caratteristica rileva se l'utente ha richiesto un livello di contrasto specifico per il proprio sistema operativo. Questo è molto vantaggioso per gli utenti con ipovisione o con alcune deficienze nella percezione dei colori.

• no-preference: Nessuna preferenza.
• less: L'utente preferisce meno contrasto.
• more: L'utente preferisce più contrasto.
• custom: L'utente ha un'impostazione di contrasto personalizzata (meno comune).

            /* Stili per un contrasto aumentato */
@media (prefers-contrast: more) {
  body {
    background-color: #000000;
    color: #FFFFFF;
  }
  button {
    border: 2px solid #FFFFFF;
    background-color: #333333;
    color: #FFFFFF;
  }
}

            

              
                Copy
              
            
          

Fornendo stili per diverse preferenze di contrasto, contribuisci attivamente a un ambiente digitale più accessibile e inclusivo per gli utenti a livello globale.

forced-colors: Gestire le Palette di Colori Forzate dal Sistema

Quando un sistema operativo (come la Modalità a Contrasto Elevato di Windows) impone una specifica palette di colori alle applicazioni, a volte può sovrascrivere o rompere i design web personalizzati. La caratteristica media forced-colors aiuta gli sviluppatori ad adattarsi a questo scenario, permettendo loro di fornire stili che funzionano bene con i vincoli di colore forzati.

• active: Lo user agent ha una modalità di colori forzati attiva.
• none: Nessuna modalità di colori forzati è attiva.

            /* Regolazioni per gli utenti in Modalità a Contrasto Elevato */
@media (forced-colors: active) {
  /* Assicura che gli elementi abbiano bordi visibili */
  button, input[type="submit"] {
    border: 1px solid currentColor;
    background-color: transparent;
    color: HighlightText;
  }
  /* Rimuovi immagini di sfondo che potrebbero oscurare il testo */
  .icon {
    background-image: none;
    border: 1px solid currentColor; /* Rendili visibili */
  }
}

            

              
                Copy
              
            
          

Questa caratteristica è vitale per garantire la conformità con gli standard di accessibilità (come WCAG) e fornire un'esperienza funzionale per gli utenti che si affidano a queste regolazioni a livello di sistema.

Caratteristiche Media Ambientali: Adattarsi alle Capacità del Dispositivo

Queste caratteristiche media ti permettono di personalizzare le esperienze in base a come un utente interagisce con il proprio dispositivo, come il tipo di dispositivo di puntamento che utilizza o le capacità del suo display.

hover e any-hover: Distinguere i Dispositivi di Puntamento

Queste caratteristiche aiutano a differenziare tra dispositivi che supportano l'hover (ad es., desktop con un mouse) e quelli che usano principalmente il tocco (ad es., smartphone, tablet). Ciò è cruciale per evitare pattern UX frustranti su dispositivi solo touch.

• hover: Si riferisce al meccanismo di input primario.
• any-hover: Si riferisce a qualsiasi meccanismo di input disponibile.
• Valori: none (nessun supporto hover), hover (supporto hover).

            /* Mostra i tooltip solo su dispositivi con capacità di hover */
.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

@media (hover: none) {
  /* Sui dispositivi touch, i tooltip potrebbero essere attivati dal focus o non essere visualizzati affatto */
  .tooltip-trigger:hover .tooltip-content {
    opacity: 0;
    visibility: hidden;
  }
  .touch-friendly-info-icon {
    display: block;
  }
}

            

              
                Copy
              
            
          

Usare any-hover è spesso più robusto, poiché un dispositivo potrebbe avere sia input touch che mouse (ad es., un laptop 2-in-1). Se any-hover è hover, allora almeno un metodo di input supporta l'hovering. Se any-hover è none, allora nessun metodo di input supporta l'hovering.

pointer e any-pointer: Distinguere la Precisione del Puntatore

Queste caratteristiche rilevano la precisione del dispositivo di puntamento primario (pointer) o di qualsiasi dispositivo disponibile (any-pointer).

• none: Nessun dispositivo di puntamento.
• coarse: Dispositivo di puntamento impreciso (ad es., dito su un touchscreen).
• fine: Dispositivo di puntamento preciso (ad es., mouse, stilo).

            /* Aumenta la dimensione dell'area di tocco per i puntatori imprecisi */
@media (pointer: coarse) {
  button, .tap-area {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }
}

/* Riduci il padding per i puntatori precisi */
@media (pointer: fine) {
  button, .tap-area {
    padding: 8px;
  }
}

            

              
                Copy
              
            
          

Questo è fondamentale per progettare interfacce touch-friendly dove le aree di tocco devono essere sufficientemente grandi per l'input con le dita, pur consentendo un design più compatto quando è disponibile un'interazione precisa con il mouse. Ciò influisce direttamente sull'usabilità su uno spettro di dispositivi e abilità degli utenti, in particolare nei mercati globali dove i dispositivi touch-first sono prevalenti.

color-gamut: Oltre sRGB

La caratteristica media color-gamut ti permette di rilevare se il display dell'utente supporta una gamma di colori più ampia rispetto allo standard sRGB (ad es., P3 o Rec. 2020). Questo consente ai designer di utilizzare una palette di colori più ricca e vibrante su schermi compatibili.

• srgb: Gamma sRGB standard.
• p3: Il display supporta la gamma P3 (più ampia di sRGB).
• rec2020: Il display supporta la gamma Rec. 2020 (ancora più ampia).

            /* Usa colori P3 per elementi di marca più vivaci su display compatibili */
@media (color-gamut: p3) {
  .brand-logo {
    color: color(display-p3 0.96 0.28 0.21); /* Un rosso vibrante in P3 */
  }
}

            

              
                Copy
              
            
          

Sebbene ancora emergente, questa caratteristica indica un futuro di esperienze web visivamente più sbalorditive e accurate, specialmente per le industrie creative o la distribuzione di contenuti ad alta fedeltà.

update: Gestire le Frequenze di Aggiornamento dello Schermo

Questa caratteristica indica la velocità con cui il dispositivo di output può modificare l'aspetto dei contenuti. È utile per ottimizzare animazioni e contenuti dinamici per diversi tipi di schermo.

• none: Non può aggiornare (ad es., documento stampato).
• slow: Si aggiorna lentamente (ad es., display e-ink, alcuni dispositivi più vecchi).
• fast: Si aggiorna rapidamente (ad es., tipici monitor di computer, smartphone).

            /* Riduci le animazioni complesse su display ad aggiornamento lento */
@media (update: slow) {
  .complex-animation {
    animation: none;
    transition: none;
  }
  .video-background {
    display: none;
  }
}

            

              
                Copy
              
            
          

Questa caratteristica aiuta a garantire che gli utenti su dispositivi come gli e-reader, che danno priorità alla durata della batteria e alla visualizzazione statica, non ricevano un'esperienza degradata o a scatti a causa di animazioni inappropriate.

Tecniche Avanzate e Best Practice

Oltre alle singole caratteristiche dei media, il modo in cui strutturi il tuo CSS e combini questi pattern può influire significativamente sulla manutenibilità, sulle prestazioni e sulla qualità generale del design.

Mobile-First vs. Desktop-First: Una Scelta Strategica

La scelta tra un approccio mobile-first e desktop-first è fondamentale per la strategia di design responsivo.

• Mobile-First (min-width):
  • Inizia progettando e stilizzando per lo schermo più piccolo (mobile).
  • Usa le media query min-width per aggiungere progressivamente stili per schermi più grandi.
  • Vantaggi:
    • Prestazioni: I dispositivi mobili hanno spesso meno potenza di elaborazione e connessioni internet più lente. Un approccio mobile-first garantisce che solo gli stili necessari vengano caricati inizialmente, portando a caricamenti di pagina più veloci. Questo è fondamentale per gli utenti in regioni con infrastrutture internet in via di sviluppo.
    • Miglioramento Progressivo: Si parte da un'esperienza solida e fondamentale, aggiungendo miglioramenti per dispositivi più capaci.
    • Focus: Incoraggia gli sviluppatori a dare la priorità a contenuti e funzionalità essenziali.
• Desktop-First (max-width):
  • Inizia progettando per schermi grandi (desktop).
  • Usa le media query max-width per sovrascrivere gli stili per schermi più piccoli.
  • Vantaggi: Può essere più facile per i team abituati al design desktop tradizionale, ma spesso porta a sovrascritture più complesse per il mobile.

Per la maggior parte dei progetti moderni, specialmente quelli che si rivolgono a un pubblico globale con diverse capacità di dispositivi e condizioni di rete, l'approccio mobile-first è fortemente raccomandato.

            /* Approccio mobile-first: gli stili per schermi piccoli sono predefiniti */
.container {
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  /* Stili specifici per tablet */
  .container {
    width: 700px;
  }
}

@media (min-width: 1200px) {
  /* Stili specifici per desktop */
  .container {
    width: 1100px;
  }
}

            

              
                Copy
              
            
          

Usare le Proprietà Personalizzate CSS (Variabili) con le Media Query

Combinare le Proprietà Personalizzate CSS (variabili) con le media query è una svolta per la manutenzione di fogli di stile grandi e responsivi. Invece di ripetere i valori, li definisci una volta e cambi i loro valori all'interno delle media query.

            /* Definisci i valori predefiniti (mobile) */
:root {
  --primary-font-size: 16px;
  --spacing-unit: 1rem;
  --grid-columns: 1;
}

/* Regola i valori per gli schermi dei tablet */
@media (min-width: 768px) {
  :root {
    --primary-font-size: 18px;
    --spacing-unit: 1.5rem;
    --grid-columns: 2;
  }
}

/* Regola i valori per gli schermi desktop */
@media (min-width: 1200px) {
  :root {
    --primary-font-size: 20px;
    --spacing-unit: 2rem;
    --grid-columns: 3;
  }
}

/* Usa le variabili in tutto il tuo CSS */
body {
  font-size: var(--primary-font-size);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--spacing-unit);
}
```

/* Applica stili per schermi tra 600px e 900px */
@media (600px <= width <= 900px) {
  .promo-box {
    flex-direction: column;
  }
}

/* Equivalente usando la sintassi tradizionale */
@media (min-width: 600px) and (max-width: 900px) {
  .promo-box {
    flex-direction: column;
  }
}
```

@media print {
  /* Nascondi elementi non essenziali per la stampa */
  nav, footer, .sidebar, .ads {
    display: none;
  }

  /* Assicura che il testo sia nero su bianco per la leggibilità */
  body {
    color: #000 !important;
    background-color: #fff !important;
    margin: 0;
    padding: 0;
  }

  /* Mostra gli URL completi per i link */
  a:link:after, a:visited:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }

  /* Interrompi le pagine in modo appropriato */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

            

              
                Copy
              
            
          

            /* Mobile-first: Predefinito a un menu nascosto, off-canvas */
.main-nav {
  display: none;
}

.mobile-menu-toggle {
  display: block;
}

/* Tablet e Desktop: Mostra menu orizzontale */
@media (min-width: 768px) {
  .main-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .mobile-menu-toggle {
    display: none;
  }
}

/* Ulteriori aggiustamenti per schermi molto larghi o aspect ratio specifici */
@media (min-width: 1400px) and (min-aspect-ratio: 16/9) {
  .main-nav li {
    padding: 0 25px;
  }
}

            

              
                Copy
              
            
          

            /* Immagine di sfondo predefinita (mobile/bassa risoluzione) */
.hero-section {
  background-image: url('hero-small.jpg');
  background-size: cover;
  background-position: center;
}

/* Immagine di sfondo a media risoluzione/desktop */
@media (min-width: 768px) {
  .hero-section {
    background-image: url('hero-medium.jpg');
  }
}

/* Immagine di sfondo specifica per alta densità di DPI (Retina) */
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  .hero-section {
    background-image: url('hero-large@2x.jpg');
  }
}

            

              
                Copy
              
            
          

            /* Tipografia fluida usando calc() e clamp() */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

/* Regola la griglia per tablet in landscape, preferendo più colonne */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Regola lo spessore del carattere per la modalità a contrasto elevato per una migliore leggibilità */
@media (prefers-contrast: more) {
  p, li {
    font-weight: bold;
  }
}

            

              
                Copy
              
            
          

            /* Variabili di colore centralizzate, adattabili alla modalità chiara/scura */
:root {
  --background-color: #f0f0f0;
  --text-color: #333333;
  --link-color: #007bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222222;
    --text-color: #e0e0e0;
    --link-color: #88bbff;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Riduci le animazioni se preferito dall'utente */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Regolazioni per la modalità a colori forzati */
@media (forced-colors: active) {
  .custom-button {
    border: 1px solid Highlight; /* Assicura che i bordi dei pulsanti siano visibili */
    background-color: Canvas;
    color: CanvasText;
  }
}

            

              
                Copy
              
            
          

            /* Esempio di una futura Container Query */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .product-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

            

              
                Copy